<template>
    <div class="topbar">
        <!-- 版心 -->
        <div class="wrap topar-in">
            <!-- 左边标题 -->

            <div class="left">
                <div class="loader">
                    <span> 欢迎来到叩丁狼积分商城</span>
                    <span> 欢迎来到叩丁狼积分商城</span>
                </div>
                <!-- 欢迎来到叩丁狼积分商城 -->
            </div>

            <!-- 右边导航 -->
            <ul class="right">
                <li>
                    <img :src="userInfo.headImg" width="26px" alt="">
                    用户名：{{ userInfo.nickName }}
                </li>
                <li>我的积分：{{ userInfo.coin }}</li>
                <li>获取积分</li>
                <li>叩丁狼官网</li>
                <li class="login-btn " v-if="isLogined" @click="toshopping">
                    <img src="../assets/img/cart.png" alt="" />
                    <span>购物车</span>
                    <b>{{ cartTotal }}</b>
                </li>
                <li class="login-btn" @click="changLogin(true)" v-else>登录</li>
            </ul>
        </div>
    </div>
</template>

<script>
Object.defineProperty
import { mapMutations, mapState, mapActions } from 'vuex';
import { WechatUsersAPT, UserProfilesAPI } from "@/request/api"
export default {

    computed: {
        ...mapState({
            // 购物车
            isLogined: state => state.isLoginshowed.isLogined,
            // 用户信息
            cartTotal: state => state.userInfo.cartTotal,
            userInfo: state => state.userInfo.userInfo
        })
    },

    methods: {
        ...mapMutations({
            // 方法名:"模块名/方法名"
            // 模态框
            changLogin: "inshowloginmodel/changLogin",
            // 购物车
            changLogined: "isLoginshowed/changLogined",
            // 用户信息
            changUserInfo: "userInfo/changUserInfo",
            // 初始化用户信息
            initUserInfo: "userInfo/initUserInfo"

        }),
        ...mapActions({
            // 提示框
            asyncChangisToastShow: "isToastShow/asyncChangisToastShow",
            // 用户信息
            asyncChangUserInfo: "userInfo/asyncChangUserInfo"
        }),
        toshopping() {
            this.$router.push("/user/cart")
        },
    },

    // 两种场景会执行当前cerated()
    // 1:项目打开,页面刷新
    // 2:微信扫码后,页面自动刷新,同时地址中携带一个code参数
    created() {
        //获取code值 (当微信用户点击允许后,页面会重新刷新 ,也就会重新执行topbar中create钩子函数)
        // 先执行路由
        this.$router.onReady(async () => {
            // console.log(this.$route.query.code);
            let code = this.$route.query.code
            if (code) {
                // 微信扫码登录后,找后台去微信换去token
                let res = await WechatUsersAPT({
                    code,
                })
                // console.log("微信登录后res", res);


                /* 
                效果重现
                重现407  微信和手机号没有关联的时候"(去备份解绑) 扫码登录
                  --- Login.vue 去输入手机号登录 进行关联 
                重现400 地址栏中有code 并且 code无效就可以了
                重现0 微信和手机号关联成功后,重新扫码登录
                */

                // 返回的code中 有3个结果
                if (res.data.code == 0) {
                    // 1等于0 登录成功
                    // 1.1提示登录成功
                    // alert("登录成功")
                    // 调用提示框方法
                    this.asyncChangisToastShow({
                        isshow: true,
                        msg: "登录成功",
                        type: "success"
                    })
                    // 1.2存储token
                    localStorage.setItem("x-auth-token", res.data["x-auth-token"])
                    // 1.3购物车显示出来
                    this.changLogined(true)
                    // 1.4清除地址栏的code
                    this.$route.query.code && this.$router.push(this.$route.path)
                    // 获取用户信息并更新vuex的数据--微信登录
                    this.asyncChangUserInfo()
                } else if (res.data.code == 400) {
                    // 2等于400提示重新刷二维码
                    // alert("请从新刷新二维码")
                    // 调用提示框方法
                    this.asyncChangisToastShow({
                        isshow: true,
                        msg: "请从新刷新二维码",
                        type: "warning"
                    })
                    // 自动打开的登录模态框
                    this.changLogin(true)
                } else if (res.data.code == 407) {
                    // 3等于407 需要用户在进行一次手机号登录(后期让后台将微信和手机号进行关联)
                    // 3.1提示用户需要进行一次手机号登录
                    // alert("请使用手机号重新登录")
                    // 调用提示框方法
                    this.asyncChangisToastShow({
                        isshow: true,
                        msg: "请使用手机号重新登录",
                        type: "warning"
                    })
                    // 3.2自动打开的登录模态框
                    this.changLogin(true)
                    // 3.3存储uuid(一会登录要用)
                    localStorage.setItem("uuid", res.data.uuid)
                }
            } else {
                let token = localStorage.getItem("x-auth-token")
                this.changLogined(Boolean(token))
                // 发送用户信息请求
                // 判断有没有token 有就请求用户数据,没有就初始化
                if (token) {
                    this.asyncChangUserInfo()
                } else {
                    // 初始化用户信息
                    this.initUserInfo()
                }
            }
        })

    },
    // watch: {
    // 方法一
    //     // 解决: 登录成功后,手动删除token,切换导航时 购物车没变. 方式一
    //     // 监听路由的地址的变化,如果有token购物车就显示,没有就隐藏
    //     "$route.path": {
    //         handler(newVal, oldVal) {
    //             console.log("watch", newVal, oldVal);
    //             if (newVal != oldVal) {
    //                 // 判断当前是否有token
    //                 let token = localStorage.getItem("x-auth-token")
    //                 // // 方法一
    //                 // if (token) {
    //                 //     this.changLogined(true)
    //                 // } else {
    //                 //     this.changLogined(false)
    //                 // }

    //                 // 方法二
    //                 this.changLogined(Boolean(token))
    //             }
    //         }
    //     }
    // }

};
</script>

<style lang="less" scoped>
.topbar {
    height: 40px;
    line-height: 40px;
    background: #242B39;
    font-size: 14px;
    font-family: SourceHanSansSC;
    color: #FFFEFE;


    .topar-in {
        display: flex;
        justify-content: space-between;
        text-align: center;
    }

    .right {
        display: flex;

        li {
            margin-left: 20px;
            cursor: pointer;

            img {
                vertical-align: middle;
                border-radius: 50%;
            }
        }

        .login-btn {
            height: 40px;
            width: 124px;
            background: #0A328E;

            span {
                margin: 0 10px;
            }

            b {
                display: inline-block;
                width: 25px;
                height: 25px;
                line-height: 25px;
                color: #FFFEFE;
                border-radius: 50%;
                background-color: red;
            }
        }

    }
}

/* From uiverse.io by @mrhyddenn */
.loader {
    // position: relative;
    margin-top: 20px;
    margin-left: 180px;
}

.loader span {
    position: absolute;
    color: #fff;
    transform: translate(-50%, -50%);
    font-size: 25px;
    letter-spacing: 5px;
}

.loader span:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 0.3px rgb(255, 255, 255);
}

.loader span:nth-child(2) {
    color: rgb(128, 198, 255);
    -webkit-text-stroke: 1px rgb(255, 255, 255);
    animation: uiverse723 3s ease-in-out infinite;
}

@keyframes uiverse723 {

    0%,
    100% {
        clip-path: polygon(0% 45%, 15% 44%, 32% 50%,
                54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }

    50% {
        clip-path: polygon(0% 60%, 16% 65%, 34% 66%,
                51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
}
</style>